<template>
  <div>
    <!-- 新增弹框 -->
    <el-dialog title="新增成员" :visible.sync="dialogFormVisible">
      <el-form :model="form" style="display: flex;flex-wrap: wrap;">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.addr" style="width: 520px;"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth">
          <el-input v-model="form.job" style="width: 520px;"></el-input>
        </el-form-item>
        <el-form-item label="薪资" :label-width="formLabelWidth">
          <el-input v-model="form.salary" style="width: 520px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="add" v-if="flag">添 加</el-button>
        <el-button type="primary" @click="update" v-if="!flag">修 改</el-button>
      </div>
    </el-dialog>

    <!-- 列表头部 -->
    <div style="display: flex">
      <el-button type="primary" @click="addUser">添加成员</el-button>
      <div>
        <el-input v-model="name" placeholder="请输入姓名" style="width: 160px;margin: 0 6px 0 100px;"></el-input>
        <el-button type="primary" @click="search" style="margin-right: 200px;">搜索</el-button>
      </div>
    </div>

    <!-- 员工列表 -->
    <el-table :row-class-name="tableRowClassName" :data="tableData" style="width: 100%;font-size: 20px;" height="700">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="gender" label="性别" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="addr" label="地址" width="180" />
      <el-table-column prop="job" label="职位" width="180" />
      <el-table-column prop="salary" label="薪资" width="180" />
      <el-table-column prop="createTime" label="入职日期" width="360" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :current-page="current"
      :total="pages * 10">
    </el-pagination>
  </div>
</template>

<script>
import { getUserPage, addUser, updateUser, deleteUser, selectUserName } from '../api/api.js'
export default {
  data() {
    return {
      flag: true,
      // 表格数据
      tableData: [],
      pages: 0,
      current: 1,
      name: '',

      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
        gender: '',
        age: '',
        addr: '',
        job: '',
        salary: "",
        createTime: null
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 != 0) {
        return 'success-row';
      }
      return '';
    },
    handleCurrentChange(val) {
      console.log(val);
      this.current = val
      this.getList()
    },
    // 获取分页列表
    getList() {
      getUserPage(this.current).then((res) => {
        console.log(res);
        this.pages = res.data.pages
        this.current = res.data.current
        this.tableData = res.data.records
      })
    },
    // 修改按钮
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true
      this.flag = false
      this.form.id = row.id
      this.form.name = row.name
      this.form.gender = row.gender
      this.form.age = row.age
      this.form.addr = row.addr
      this.form.job = row.job
      this.form.salary = row.salary
    },
    // 修改
    update() {
      this.dialogFormVisible = false
      updateUser(this.form).then((res) => {
        console.log(res);
        this.$message({
          message: '修改成功!',
          type: 'success'
        });
        this.getList()
      })
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
      if (localStorage.getItem('name') == '超级管理员') {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          deleteUser(row.id).then((res) => {
            console.log(res);
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          message: '您没有权限!',
          type: 'warning'
        });
      }
    },
    // 添加按钮
    addUser() {
      this.flag = true
      this.dialogFormVisible = true
      this.form.name = ''
      this.form.gender = ''
      this.form.age = ''
      this.form.addr = ''
    },
    // 确认添加
    add() {
      this.dialogFormVisible = false
      addUser(this.form).then((res) => {
        console.log(res);
        this.$message({
          message: '添加成功!',
          type: 'success'
        });
        this.getList()
      })
    },
    // 取消
    cancle() {
      this.dialogFormVisible = false
    },
    // 条件查询
    search() {
      if (this.name == '') {
        this.$message({
          message: '内容不能为空',
          type: 'warning'
        });
      } else {
        this.$message({
          message: '查询成功!',
          type: 'success'
        });
        selectUserName(this.name).then((res) => {
          console.log(res);
          this.tableData = res.data
        })
      }
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 50px;
  position: absolute;
  left: 53%;
  transform: translate(-50%, 0);
}

.el-table {
  height: 686px;
}
</style>